<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>明星周边 | 销售报表</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6a0dad', // 主紫色
            secondary: '#9c4dff', // 辅助紫色
            accent: '#c77dff', // 强调色
            dark: '#16213e', // 深色背景
            darker: '#1a1a2e', // 更深色背景
            light: '#e6e6e6', // 浅色文本
            muted: '#a0a0a0', // 次要文本
            success: '#4ade80', // 成功色
            warning: '#f59e0b', // 警告色
            danger: '#ef4444', // 危险色
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
      }
      .hover-scale {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.03);
        box-shadow: 0 20px 40px -5px rgba(106, 13, 173, 0.3);
      }
      .gradient-bg {
        background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
      }
      .glass-effect {
        backdrop-filter: blur(12px);
        background-color: rgba(22, 33, 62, 0.75);
      }
      .animate-fade-in {
        animation: fadeIn 0.8s ease-in-out;
      }
      .animate-slide-up {
        animation: slideUp 0.6s ease-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes slideUp {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    }
  </style>
</head>
<body class="font-inter bg-darker text-light min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="glass-effect sticky top-0 z-50 border-b border-primary/20 transition-all duration-300">
  <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-2 mb-2 md:mb-0">
      <i class="fa fa-bar-chart text-secondary text-xl"></i>
      <span class="text-xl font-bold bg-gradient-to-r from-secondary to-accent bg-clip-text text-transparent">明星周边销售报表</span>
    </a>

    <!-- 时间筛选器 -->
    <div class="flex items-center space-x-3 mb-2 md:mb-0">
      <div class="relative">
        <select id="time-filter" class="appearance-none bg-dark border border-primary/30 text-light rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
          <option value="month">近6个月</option>
          <option value="quarter">近1年</option>
          <option value="year">近3年</option>
          <option value="custom">自定义</option>
        </select>
        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
          <i class="fa fa-chevron-down text-muted"></i>
        </div>
      </div>

      <!-- 数据导出按钮 -->
      <button id="export-btn" class="flex items-center space-x-1 bg-primary/20 hover:bg-primary/30 text-secondary px-3 py-2 rounded-lg transition-colors duration-300">
        <i class="fa fa-download"></i>
        <span class="text-sm">导出数据</span>
      </button>
    </div>

    <a href="http://localhost/index" class="flex items-center space-x-1 text-secondary hover:text-accent transition-colors duration-300">
      <i class="fa fa-arrow-left"></i>
      <span class="font-medium">返回商城</span>
    </a>
  </div>
</nav>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
  <!-- KPI指标卡片 -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 animate-fade-in">
    <!-- 总销售额 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark p-6">
      <div class="flex justify-between items-start mb-4">
        <div>
          <p class="text-muted text-sm">总销售额</p>
          <h3 class="text-3xl font-bold mt-1"><span id="total-sales">¥115.8</span> 万元</h3>
        </div>
        <div class="bg-primary/20 p-3 rounded-lg">
          <i class="fa fa-money text-secondary text-xl"></i>
        </div>
      </div>
      <div class="flex items-center text-success text-sm">
        <i class="fa fa-arrow-up mr-1"></i>
        <span>12.5% 较上月</span>
      </div>
    </div>

    <!-- 总销量 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark p-6">
      <div class="flex justify-between items-start mb-4">
        <div>
          <p class="text-muted text-sm">总销量</p>
          <h3 class="text-3xl font-bold mt-1"><span id="total-sales-volume">4542</span> 件</h3>
        </div>
        <div class="bg-secondary/20 p-3 rounded-lg">
          <i class="fa fa-shopping-bag text-secondary text-xl"></i>
        </div>
      </div>
      <div class="flex items-center text-success text-sm">
        <i class="fa fa-arrow-up mr-1"></i>
        <span>8.3% 较上月</span>
      </div>
    </div>

    <!-- 热销商品 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark p-6">
      <div class="flex justify-between items-start mb-4">
        <div>
          <p class="text-muted text-sm">热销商品</p>
          <h3 class="text-2xl font-bold mt-1"><span id="best-seller">小卡</span></h3>
        </div>
        <div class="bg-accent/20 p-3 rounded-lg">
          <i class="fa fa-star text-accent text-xl"></i>
        </div>
      </div>
      <div class="text-sm">销量: <span class="font-medium">1256 件</span></div>
    </div>

    <!-- 主要渠道 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark p-6">
      <div class="flex justify-between items-start mb-4">
        <div>
          <p class="text-muted text-sm">主要渠道</p>
          <h3 class="text-2xl font-bold mt-1"><span id="main-channel">官方商城</span></h3>
        </div>
        <div class="bg-primary/20 p-3 rounded-lg">
          <i class="fa fa-globe text-secondary text-xl"></i>
        </div>
      </div>
      <div class="text-sm">占比: <span class="font-medium">50%</span></div>
    </div>
  </div>

  <!-- 月度销售趋势卡片 -->
  <div class="card-shadow hover-scale rounded-2xl overflow-hidden mb-8 bg-dark animate-slide-up" style="animation-delay: 0.2s">
    <div class="bg-gradient-to-r from-primary to-secondary p-6 flex justify-between items-center">
      <h2 class="text-2xl font-bold flex items-center">
        <i class="fa fa-line-chart mr-3"></i>月度销售趋势
      </h2>
      <div class="flex space-x-2">
        <button class="time-range-btn active px-3 py-1 rounded-md text-sm bg-secondary/20 text-secondary">近6个月</button>
        <button class="time-range-btn px-3 py-1 rounded-md text-sm bg-dark/50 text-muted hover:bg-dark">近1年</button>
        <button class="time-range-btn px-3 py-1 rounded-md text-sm bg-dark/50 text-muted hover:bg-dark">近3年</button>
      </div>
    </div>
    <div class="p-6">
      <div class="w-full h-[380px]">
        <canvas id="lineChart"></canvas>
      </div>
    </div>
  </div>

  <!-- 销售渠道和热销商品卡片 -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- 销售渠道占比卡片 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark animate-slide-up" style="animation-delay: 0.4s">
      <div class="bg-gradient-to-r from-secondary/80 to-accent/80 p-6 flex justify-between items-center">
        <h2 class="text-xl font-bold flex items-center">
          <i class="fa fa-pie-chart mr-3"></i>销售渠道占比
        </h2>
        <button class="channel-comparison-btn text-accent hover:text-white text-sm flex items-center">
          <i class="fa fa-exchange mr-1"></i> 对比
        </button>
      </div>
      <div class="p-6">
        <div class="w-full h-[320px]">
          <canvas id="pieChart"></canvas>
        </div>
      </div>
    </div>

    <!-- 热销商品TOP5卡片 -->
    <div class="card-shadow hover-scale rounded-2xl overflow-hidden bg-dark animate-slide-up" style="animation-delay: 0.6s">
      <div class="bg-gradient-to-r from-secondary/80 to-accent/80 p-6 flex justify-between items-center">
        <h2 class="text-xl font-bold flex items-center">
          <i class="fa fa-trophy mr-3"></i>热销商品TOP5
        </h2>
        <div class="relative">
          <select id="category-filter" class="appearance-none bg-dark/50 border-none text-light px-2 py-1 pr-8 focus:outline-none">
            <option value="all">全部类别</option>
            <option value="card">小卡</option>
            <option value="badge">吧唧</option>
            <option value="ticket">票根</option>
            <option value="stand">立牌</option>
            <option value="bracket">支架</option>
          </select>
          <div class="absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none text-muted">
            <i class="fa fa-chevron-down text-xs"></i>
          </div>
        </div>
      </div>
      <div class="p-6">
        <div class="w-full h-[320px]">
          <canvas id="barChart"></canvas>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- 页脚 -->
<footer class="glass-effect py-6 border-t border-primary/20 animate-fade-in">
  <div class="container mx-auto px-4 text-center text-muted">
    <p>© 2023 明星周边销售报表系统 | 数据更新时间: 2023-06-15</p>
    <p class="text-xs mt-2">最后访问: <span id="last-visit-time"></span></p>
  </div>
</footer>

<!-- 导出模态框 -->
<div id="export-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden animate-fade-in">
  <div class="bg-dark rounded-2xl w-full max-w-md p-6 card-shadow">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-xl font-bold">导出数据</h3>
      <button id="close-modal" class="text-muted hover:text-light">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="space-y-3 mb-6">
      <button class="w-full flex items-center justify-center space-x-2 bg-primary/20 hover:bg-primary/30 text-secondary py-2 rounded-lg transition-colors">
        <i class="fa fa-file-excel-o"></i>
        <span>导出为Excel</span>
      </button>
      <button class="w-full flex items-center justify-center space-x-2 bg-primary/20 hover:bg-primary/30 text-secondary py-2 rounded-lg transition-colors">
        <i class="fa fa-file-pdf-o"></i>
        <span>导出为PDF</span>
      </button>
      <button class="w-full flex items-center justify-center space-x-2 bg-primary/20 hover:bg-primary/30 text-secondary py-2 rounded-lg transition-colors">
        <i class="fa fa-file-csv-o"></i>
        <span>导出为CSV</span>
      </button>
    </div>
    <div class="text-center">
      <p class="text-sm text-muted mb-4">选择格式导出销售数据报表</p>
      <button id="cancel-export" class="px-4 py-2 bg-dark border border-primary/30 text-light rounded-lg mr-2">取消</button>
      <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">确认导出</button>
    </div>
  </div>
</div>

<script>
  // 图表颜色配置
  const chartColors = {
    primary: '#9c4dff',
    secondary: '#6a0dad',
    accent: '#c77dff',
    dark: '#16213e',
    light: '#e6e6e6',
    muted: '#a0a0a0',
    success: '#4ade80',
    warning: '#f59e0b',
    danger: '#ef4444',
    gradients: {
      primary: (ctx) => {
        const chart = ctx.chart;
        const {ctx: context, chartArea} = chart;
        if (!chartArea) return;
        const gradient = context.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
        gradient.addColorStop(0, 'rgba(156, 77, 255, 0.6)');
        gradient.addColorStop(1, 'rgba(156, 77, 255, 0.15)');
        return gradient;
      },
      secondary: (ctx) => {
        const chart = ctx.chart;
        const {ctx: context, chartArea} = chart;
        if (!chartArea) return;
        const gradient = context.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
        gradient.addColorStop(0, 'rgba(106, 13, 173, 0.6)');
        gradient.addColorStop(1, 'rgba(106, 13, 173, 0.1)');
        return gradient;
      }
    }
  };

  // 模拟数据 - 可根据实际需求替换为API数据
  const salesData = {
    monthly: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      data: [12.5, 15.2, 18.8, 20.5, 22.2, 25.8]
    },
    yearly: {
      labels: ['2020', '2021', '2022', '2023'],
      data: [58.2, 89.5, 105.3, 115.8]
    },
    channel: {
      labels: ['官方商城', '粉丝平台', '线下展会', '二手交易'],
      data: [50, 30, 15, 5]
    },
    products: {
      labels: ['小卡', '吧唧', '票根', '立牌', '支架'],
      data: [1256, 998, 887, 756, 645]
    },
    productCategories: {
      card: [1256, 0, 0, 0, 0],
      badge: [0, 998, 0, 0, 0],
      ticket: [0, 0, 887, 0, 0],
      stand: [0, 0, 0, 756, 0],
      bracket: [0, 0, 0, 0, 645]
    }
  };

  // 初始化图表实例
  let lineChart, pieChart, barChart;

  // 月度销售趋势折线图
  function initLineChart(data) {
    const lineCtx = document.getElementById('lineChart').getContext('2d');

    // 销毁现有图表（如果存在）
    if (lineChart) lineChart.destroy();

    lineChart = new Chart(lineCtx, {
      type: 'line',
      data: {
        labels: data.labels,
        datasets: [{
          label: '销售额 (万元)',
          data: data.data,
          borderColor: chartColors.primary,
          backgroundColor: chartColors.gradients.primary,
          borderWidth: 4,
          tension: 0.4,
          fill: true,
          pointBackgroundColor: chartColors.primary,
          pointBorderColor: '#fff',
          pointBorderWidth: 2,
          pointRadius: 6,
          pointHoverRadius: 8,
          pointHoverBackgroundColor: chartColors.accent,
          pointHoverBorderColor: '#fff'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
          mode: 'index',
          intersect: false,
          callbacks: {
            label: function(context) {
              return `销售额: ${context.raw} 万元`;
            }
          }
        },
        plugins: {
          legend: {
            display: true,
            position: 'top',
            labels: {
              color: chartColors.light,
              font: {
                family: 'Inter',
                size: 14
              },
              padding: 20
            }
          },
          tooltip: {
            backgroundColor: chartColors.dark,
            titleColor: chartColors.light,
            bodyColor: chartColors.light,
            borderColor: chartColors.primary,
            borderWidth: 1,
            padding: 15,
            displayColors: false,
            usePointStyle: true,
            pointStyle: 'circle'
          },
          annotation: {
            annotations: {
              line1: {
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y',
                value: 20,
                borderColor: chartColors.warning,
                borderWidth: 2,
                label: {
                  content: '季度目标',
                  enabled: true,
                  color: chartColors.warning,
                  font: {
                    family: 'Inter',
                    size: 12
                  },
                  padding: 8
                }
              }
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(255, 255, 255, 0.05)',
              drawBorder: false
            },
            ticks: {
              color: chartColors.muted,
              padding: 10,
              font: {
                family: 'Inter'
              }
            },
            title: {
              display: true,
              text: '销售额 (万元)',
              color: chartColors.muted,
              font: {
                family: 'Inter',
                weight: 'bold'
              },
              padding: {
                top: 10,
                bottom: 10
              }
            }
          },
          x: {
            grid: {
              display: false,
              drawBorder: false
            },
            ticks: {
              color: chartColors.muted,
              padding: 10,
              font: {
                family: 'Inter'
              }
            }
          }
        },
        animations: {
          tension: {
            duration: 1000,
            easing: 'linear'
          },
          point: {
            duration: 1000,
            easing: 'easeOutQuart'
          }
        }
      }
    });
  }

  // 销售渠道占比饼图
  function initPieChart() {
    const pieCtx = document.getElementById('pieChart').getContext('2d');

    // 销毁现有图表（如果存在）
    if (pieChart) pieChart.destroy();

    pieChart = new Chart(pieCtx, {
      type: 'doughnut',
      data: {
        labels: salesData.channel.labels,
        datasets: [{
          data: salesData.channel.data,
          backgroundColor: [
            chartColors.primary,
            chartColors.secondary,
            chartColors.accent,
            '#4a148c'
          ],
          borderWidth: 0,
          hoverOffset: 12,
          hoverBackgroundColor: [
            '#b378ff',
            '#8e24aa',
            '#d8a1ff',
            '#6a1b9a'
          ]
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '68%',
        plugins: {
          legend: {
            position: 'right',
            labels: {
              color: chartColors.light,
              padding: 20,
              font: {
                family: 'Inter',
                size: 13
              },
              boxWidth: 10,
              boxHeight: 10,
              usePointStyle: true,
              pointStyle: 'circle'
            }
          },
          tooltip: {
            backgroundColor: chartColors.dark,
            titleColor: chartColors.light,
            bodyColor: chartColors.light,
            borderColor: chartColors.primary,
            borderWidth: 1,
            padding: 15,
            callbacks: {
              label: function(context) {
                const label = context.label || '';
                const value = context.raw || 0;
                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                const percentage = Math.round((value / total) * 100);
                return `${label}: ${percentage}%`;
              }
            }
          },
          datalabels: {
            display: true,
            color: chartColors.light,
            font: {
              family: 'Inter',
              size: 16,
              weight: 'bold'
            },
            formatter: (value, context) => {
              const total = context.dataset.data.reduce((a, b) => a + b, 0);
              return Math.round((value / total) * 100) + '%';
            }
          }
        },
        animations: {
          animateRotate: true,
          animateScale: true,
          duration: 1500,
          easing: 'easeOutQuart'
        }
      }
    });
  }

  // 热销商品TOP5柱状图
  function initBarChart(data) {
    const barCtx = document.getElementById('barChart').getContext('2d');

    // 销毁现有图表（如果存在）
    if (barChart) barChart.destroy();

    barChart = new Chart(barCtx, {
      type: 'bar',
      data: {
        labels: salesData.products.labels,
        datasets: [{
          label: '销量 (件)',
          data: data,
          backgroundColor: data.map(() => chartColors.primary),
          borderRadius: 8,
          borderSkipped: false,
          barPercentage: 0.6,
          categoryPercentage: 0.7
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            backgroundColor: chartColors.dark,
            titleColor: chartColors.light,
            bodyColor: chartColors.light,
            borderColor: chartColors.primary,
            borderWidth: 1,
            padding: 15,
            callbacks: {
              label: function(context) {
                return `销量: ${context.raw} 件`;
              }
            }
          }
        },
        scales: {
          x: {
            beginAtZero: true,
            grid: {
              color: 'rgba(255, 255, 255, 0.05)',
              drawBorder: false
            },
            ticks: {
              color: chartColors.muted,
              padding: 10,
              font: {
                family: 'Inter'
              }
            },
            title: {
              display: true,
              text: '销量 (件)',
              color: chartColors.muted,
              font: {
                family: 'Inter',
                weight: 'bold'
              },
              padding: {
                top: 10,
                bottom: 10
              }
            }
          },
          y: {
            grid: {
              display: false,
              drawBorder: false
            },
            ticks: {
              color: chartColors.light,
              padding: 15,
              font: {
                family: 'Inter',
                size: 13
              }
            }
          }
        },
        animations: {
          y: {
            duration: 1200,
            easing: 'easeOutQuart'
          },
          x: {
            duration: 1200,
            easing: 'easeOutQuart'
          }
        }
      }
    });
  }

  // 初始化所有图表
  function initCharts() {
    initLineChart(salesData.monthly);
    initPieChart();
    initBarChart(salesData.products.data);

    // 更新KPI指标
    document.getElementById('total-sales').textContent = `¥${salesData.yearly.data[salesData.yearly.data.length - 1].toFixed(1)}`;
    document.getElementById('total-sales-volume').textContent = salesData.products.data.reduce((a, b) => a + b, 0);
    document.getElementById('best-seller').textContent = salesData.products.labels[0];
    document.getElementById('main-channel').textContent = salesData.channel.labels[0];

    // 更新最后访问时间
    const now = new Date();
    const formatDate = (date) =>
      `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    document.getElementById('last-visit-time').textContent = formatDate(now);
  }

  // 时间范围切换
  document.querySelectorAll('.time-range-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // 移除所有按钮的active类
      document.querySelectorAll('.time-range-btn').forEach(b => b.classList.remove('active', 'bg-secondary/20', 'text-secondary'));
      document.querySelectorAll('.time-range-btn').forEach(b => b.classList.add('bg-dark/50', 'text-muted'));

      // 添加当前按钮的active类
      this.classList.add('active', 'bg-secondary/20', 'text-secondary');
      this.classList.remove('bg-dark/50', 'text-muted');

      // 根据按钮文本切换图表数据
      if (this.textContent.includes('近6个月')) {
        initLineChart(salesData.monthly);
      } else if (this.textContent.includes('近1年')) {
        initLineChart({
          labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          data: [8.5, 10.2, 12.8, 15.5, 17.2, 19.8, 21.2, 22.5, 23.8, 24.5, 25.2, 26.8]
        });
      } else if (this.textContent.includes('近3年')) {
        initLineChart(salesData.yearly);
      }
    });
  });

  // 时间筛选器切换
  document.getElementById('time-filter').addEventListener('change', function() {
    const value = this.value;
    if (value === 'month') {
      initLineChart(salesData.monthly);
    } else if (value === 'quarter') {
      initLineChart({
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        data: [45.5, 55.2, 60.8, 65.8]
      });
    } else if (value === 'year') {
      initLineChart(salesData.yearly);
    }
  });

  // 商品类别筛选
  document.getElementById('category-filter').addEventListener('change', function() {
    const value = this.value;
    if (value === 'all') {
      initBarChart(salesData.products.data);
    } else {
      initBarChart(salesData.productCategories[value]);
    }
  });

  // 数据导出功能
  document.getElementById('export-btn').addEventListener('click', function() {
    document.getElementById('export-modal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  });

  document.getElementById('close-modal').addEventListener('click', closeExportModal);
  document.getElementById('cancel-export').addEventListener('click', closeExportModal);

  function closeExportModal() {
    document.getElementById('export-modal').classList.add('hidden');
    document.body.style.overflow = '';
  }

  // 导航栏滚动效果
  window.addEventListener('scroll', function() {
    const nav = document.querySelector('nav');
    if (window.scrollY > 10) {
      nav.classList.add('py-2');
      nav.classList.remove('py-3');
    } else {
      nav.classList.add('py-3');
      nav.classList.remove('py-2');
    }
  });

  // 页面加载完成后初始化
  window.addEventListener('load', initCharts);
</script>
</body>
</html>